<script setup lang="ts">
import { ref } from 'vue'
interface OrdersTs{
  id:string,
  date:string
  status:string
  amount:string
  items:itemTs[]
}
interface itemTs{
  name:string
  price:string
  quantity:number
}
const orders = ref<OrdersTs[]>([])

const viewOrderDetail = (orderId: string) => {
  uni.navigateTo({
    url: `/pages/Myinfo/OrderDetail?id=${orderId}`
  })
}
</script>

<template>
  <view class="container">
    <view class="content">
      <view class="order-list">
        <view 
          class="order-card" 
          v-for="order in orders" 
          :key="order.id"
          @click="viewOrderDetail(order.id)"
        >
          <view class="order-header">
            <view class="order-id">订单号: {{ order.id }}</view>
            <view class="order-status" :class="order.status">{{ order.status }}</view>
          </view>
          
          <view class="order-date">日期: {{ order.date }}</view>
          
          <view class="order-items">
            <view 
              class="item" 
              v-for="(item, index) in order.items" 
              :key="index"
            >
              <view class="item-name">{{ item.name }}</view>
              <view class="item-price">{{ item.price }}x{{ item.quantity }}</view>
            </view>
          </view>
          
          <view class="order-footer">
            <view class="total-amount">总计: {{ order.amount }}</view>
            <view class="order-arrow">></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.container {
  min-height: 100vh;
  position: relative;
  padding-bottom: 120rpx;
  box-sizing: border-box;
  background: #10182a;
}

.content {
  position: relative;
  z-index: 1;
  padding: 40rpx 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.order-list {
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.order-card {
  background: rgba(255,255,255,0.06);
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.08);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.order-id {
  color: #fff;
  font-size: 28rpx;
}

.order-status {
  font-size: 26rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
}

.order-status {
  background: rgba(76, 175, 80, 0.2);
  color: #4CAF50;
}

.order-status {
  background: rgba(255, 193, 7, 0.2);
  color: #FFC107;
}

.order-status {
  background: rgba(244, 67, 54, 0.2);
  color: #F44336;
}

.order-date {
  color: rgba(255,255,255,0.6);
  font-size: 26rpx;
  margin-bottom: 20rpx;
}

.order-items {
  margin-bottom: 20rpx;
}

.item {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 0;
  border-bottom: 1rpx solid rgba(255,255,255,0.08);
}

.item:last-child {
  border-bottom: none;
}

.item-name {
  color: #fff;
  font-size: 28rpx;
}

.item-price {
  color: rgba(255,255,255,0.6);
  font-size: 26rpx;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
}

.total-amount {
  color: #fff;
  font-size: 30rpx;
  font-weight: bold;
}

.order-arrow {
  color: #fff;
  font-size: 32rpx;
  opacity: 0.4;
}
</style>
